<template>
	<div class='system-add-user-container'>
		<el-dialog title='新增用户' v-model='isShowDialog' width='769px'>
			<el-form :model='ruleForm' size='default' label-width='90px'>
				<el-row :gutter='35'>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='账户名称'>
							<el-input v-model='ruleForm.username' placeholder='请输入账户名称' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='用户昵称'>
							<el-input v-model='ruleForm.nickName' placeholder='请输入用户昵称' clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='手机号'>
							<el-input v-model='ruleForm.phone' placeholder='请输入手机号' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='邮箱'>
							<el-input v-model='ruleForm.email' placeholder='请输入' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='性别'>
							<el-select v-model='ruleForm.gender' placeholder='请选择' class='w100'>
								<el-option label='男' value='男'></el-option>
								<el-option label='女' value='女'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='账户密码'>
							<el-input v-model='ruleForm.password' placeholder='请输入' type='password' clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='关联角色'>
							<el-select v-model='roleData' multiple placeholder='请选择' class='w100' @change='onRoleChange'>
								<el-option
									v-for='item in initRoleData'
									:key='item.id'
									:label='item.name'
									:value='item.id'
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12' class='mb20'>
						<el-form-item label='关联部门'>
							<el-cascader
								:options='initDeptData'
								:props="{ checkStrictly: true, value: 'id', label: 'name' }"
								placeholder='请选择部门'
								clearable
								class='w100'
								@change='onDeptChange'
							>
								<template #default='{ node, data }'>
									<span>{{ data.name }}</span>
									<span v-if='!node.isLeaf'> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class='dialog-footer'>
					<el-button @click='onCancel' size='default'>取 消</el-button>
					<el-button type='primary' @click='onSubmit' size='default'>新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
import { useDeptApi } from '/@/api/dept';
import { useRoleApi } from '/@/api/role';
import { ElMessage } from 'element-plus';
import { useUserApi } from '/@/api/user';

export default defineComponent({
	name: 'systemAddUser',
	setup() {
		const state = reactive({
			isShowDialog: false,
			ruleForm: {
				deptId: '',
				role: '',
				username: '',
				nickName: '',
				gender: '',
				phone: '',
				email: '',
				password: '',
			},
			initRoleData: [],
			roleData: [],
			initDeptData: [], // 部门数据
		});
		// 打开弹窗
		const openDialog = () => {
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = async () => {
			if (state.ruleForm.deptId == '' || state.ruleForm.role == '') {
				ElMessage.error('未选中部门或角色');
			} else {
				await useUserApi().add(state.ruleForm);
			}
			closeDialog();
		};
		// 初始化数据
		const initTableData = async () => {
			state.initRoleData = await useRoleApi().getAll() as any;
			state.initDeptData = await useDeptApi().getTree() as any;
		};
		const onDeptChange = (value: string) => {
			try {
				let length = value.toString().split(',').length;
				state.ruleForm.deptId = value.toString().split(',')[length - 1];
			} catch (e) {
			}
		};
		const onRoleChange = (value: string) => {
			state.ruleForm.role = value.toString();
		};
		// 页面加载时
		onMounted(() => {
			initTableData();
		});
		return {
			onRoleChange,
			onDeptChange,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
});
</script>
